/*
参数说明:
alertShow-弹出框参数{
showmsg-服务器弹窗提示
msg-服务器提示内容
}
itemData-订单
hasAddress-是否有收获地址true是有false没有
addressList-收获地址基本信息集合
方法：
addressfn-选择收货地址方法跳转
scroeFn-积分抵扣卷选择方法跳转
shopCleanfn-去支付订单方法跳转
*/
<template>
  <div>
    <alert v-model="alertShow.showmsg" :title="'提示'" @on-show="onShow" @on-hide="onHide">{{alertShow.msg}}</alert>
    <div style="background-color:#3d82e5;color: #ffffff;width:100%;left:0;top:0;" @click="addressfn" >
      <flexbox v-if="hasAddress===false" title="''" wrap="nowrap" >
        <flexbox-item :span="12">
          <flexbox title="''" wrap="nowrap" >
            <flexbox-item :span="2" style="text-align: center">
              <img src="../../../assets/images/shopCar/add_icon.png">
            </flexbox-item>
            <flexbox-item :span="8">
              <h3 style="padding: 15px">请编辑收获地址</h3>
            </flexbox-item>
            <flexbox-item :span="1"><img src="../../../../src/assets/images/shopCar/address_go.png"></flexbox-item>
          </flexbox>
        </flexbox-item>
      </flexbox>
      <flexbox v-if="hasAddress===true" title="''" wrap="nowrap" >
        <flexbox-item :span="1.2" style="text-align: center">
          <img src="../../../../src/assets/images/shopCar/add_icon.png" style="width: 16px;">
        </flexbox-item>
        <flexbox-item :span="8.8">
          <flexbox title="''" wrap="nowrap" :gutter="0">
            <flexbox-item :span="5" style="text-align: left;">收货人：</flexbox-item>
            <flexbox-item :span="4"><p style="font-size: 13px">{{addressList.linkName}}</p></flexbox-item>
            <flexbox-item :span="4"><p style="font-size: 13px">{{addressList.linkTel}}</p></flexbox-item>
          </flexbox>
          <flexbox title="''" wrap="nowrap" align="flex-start" :gutter="0">
            <flexbox-item :span="5" style="text-align: left;">收货地址：</flexbox-item>
            <flexbox-item :span="8"><p style="font-size: 13px">{{addressInfo}}</p></flexbox-item>
          </flexbox>
        </flexbox-item>
        <flexbox-item :span="1" style="text-align: right;padding-top: 10px;">
          <img src="../../../../src/assets/images/shopCar/address_go.png" style="width: 10px;">
          <!--<a style="color: #ffffff;width:100%; height:30px; border:0; display:table-cell;vertical-align: middle;"  href="javascript:;">〉</a>-->
        </flexbox-item>
      </flexbox>
    </div>
    <div>
      <div>
        <group :title="''">
          <shopList :isCheck="false">
            <div slot="img" style="margin: 0 5px;text-align: center">
              <img :src="itemData.imgUrl"   height="80px">
            </div>
            <p slot="shopName">{{itemData.name}}</p>
            <h4 slot="money" style="float: right;">￥{{itemData.nowPrice}}</h4>
            <p slot="number" style="float: right;color: #999999">x1</p>
          </shopList>
          <!--<cell :title="'发货方式'" :value="'快递：林威没传'"></cell>-->
          <cell :title="'订单总计'" :value="''">￥{{itemData.nowPrice}}</cell>
        </group>
      </div>
      <flexbox :gutter="20"  wrap="nowrap" style="background-color: #ffffff;">
        <flexbox-item :span="7">
          <div style="text-align: right;">
            <p style="color: #a9a9a9;padding-top: 10px;display: inline-block;font-weight: bold;">总计:</p>
            <p style="color: #ff0e04;padding-top: 10px;display: inline-block">￥{{itemData.nowPrice}}</p>
          </div>
        </flexbox-item>
        <flexbox-item :span="4"><div style="padding-top: 3px"><x-button @click.native="shopCleanfn" style="background-color: #f95320;color: #ffffff;font-size: 15px;width: 80px;height: 30px;line-height: 30px;" >去付款</x-button></div></flexbox-item>
      </flexbox>
    </div>
  </div>
</template>
<script>
  import { Group, Cell, Flexbox, FlexboxItem, XButton, Alert } from 'vux'
  import shopList from '../../../components/shopCart/ShopCart_Q.vue'
  import * as urls from '../../../api/urls'
  import * as types from '../../../store/types'

  export default {
    components: {
      Group,
      Cell,
      Flexbox,
      FlexboxItem,
      shopList,
      XButton,
      Alert
    },
    mounted: function () {
      this.shopId = this.$route.query.shopId
      this.getcleanList()
      this.addressListfn()
      this.weixinfn34()
    },
    data () {
      return {
        alertShow: {
          showmsg: false,
          msg: ''
        },
        itemData: {},
        hasAddress: true,
        addressList: [],
        addressInfo: '',
        carMoney: '',
        addressId: '',
        shopId: ''
      }
    },
    methods: {
      weixinfn34 () {
        let that = this
        let userId = this.$store.state.userInfo.id
        let logo = this.$store.state.empower.LOGO
        let url = window.location.origin
        let link = url + '/api/wxAuth/index?type=t1' + '&uid=' + userId
        that.$wechat.onMenuShareAppMessage({
          title: '孝行通', // 分享标题
          desc: '孝行通·微商城 一个让子女为父母尽孝的老年服务平台', // 分享描述
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
        that.$wechat.onMenuShareTimeline({
          title: '孝行通', // 分享标题
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
      },
      getcleanList () {
        let that = this
        this.http(urls.shopItembuy, {itemId: parseInt(that.shopId)}, function (res) {
          if (res.status === 100) {
            if (res.data.item !== null) {
              that.itemData = res.data.item
            }
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      addressListfn () {
        let userId = this.$store.state.userInfo.id
        let that = this
        this.http(urls.userAddressList, {userId: userId}, function (res) {
          if (res.status === 100) {
            if (res.data.list.length === 0) {
              that.hasAddress = false
            } else {
              that.addressList = res.data.list[0]
              that.addressId = that.addressList.id
              that.addressInfo = that.addressList.pro + that.addressList.city + that.addressList.area + that.addressList.address
              that.hasAddress = true
            }
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      addressfn () {
        this.$store.commit(types.EMPOWER, {isPointBuy: 0})
        this.$store.commit(types.EMPOWER, {addressLuckType: false})
        this.$router.push({
          path: '/shoppingCar/SelectAddress'
        })
        this.$router.go(1)
      },
      shopCleanfn () {
        let userId = this.$store.state.userInfo.id
        let that = this
        if (this.addressId !== '') {
          this.http(urls.itemPay, {userId: userId, itemId: that.itemData.itemId, count: 1, addressId: that.addressId}, function (res) {
            if (res.status === 100) {
              if (res.data.orderMain !== null) {
                that.mianOrderId = res.data.orderMain.id
                that.$router.push({
                  path: '/shoppingCar/shoppingBuy',
                  query: {
                    money: '',
                    useScore: '',
                    mianOrderId: res.data.orderMain.id
                  }
                })
                that.$router.go(1)
              }
            } else {
              that.alertShow.showmsg = true
              that.alertShow.msg = res.errMsg
            }
          }, function (res) {
            that.alertShow.showmsg = true
            that.alertShow.msg = res
          })
        } else {
          that.alertShow.showmsg = true
          that.alertShow.msg = '请先选择收货地址'
        }
      },
      onShow () {
        // 弹窗出现时触发
      },
      onHide () {
        // 弹窗关闭时触发
      }
    }
  }
</script>
<style scoped="scoped">
</style>
